
<template>
    <div>
      <child @add="add" :count="count" />
    </div>
  </template>
  <script setup>
  import child from './child.vue';
  import { ref } from 'vue';
  
  const count = ref(100);
  const add= (num) => {
    count.value += num;
  };
  </script>
  
  <!-- <template>
    <div>{{ count }} --{{ name }}</div>
    <el-button @click="fn">点击</el-button>
    <h1>{{ nameLen }}</h1>
    <h1>{{ dbCount }}</h1>
    <single-upload />
  </template>
  
  <script setup>
  import child from './child.vue';
  import SingleUpload from "@/components/Upload/SingleUpload.vue";
  import {ref,onBeforeMount,
    onMounted,
    computed,
    watch,
    onBeforeUpdate,
    onUpdated,
    onBeforeUnmount,
    onUnmounted,
  } from "vue";
  
  const count = ref(0);
  let name = "啊啊啊";
  
  watch(()=>count,(newValue, oldValue) => {
      // 监听count
      console.log("count改变了！", newValue, oldValue);
    },
    {
      deep: true, // 深度监听
      immediate: true, // 立即执行一次
    }
  );
  const nameLen = computed( {
    get(){
      return name.length; // 计算属性
    },
    set(val){
      name=val; // 设置属性
    }
  });
  
  const fn = () => {
    count.value++;
  };
  
  const dbCount = computed(() => {
    return count.value * 2;
  });
  
  // onBeforeMount(()=>{
  //   console.log("挂载前！")
  // })
  
  onMounted(() => {
    console.log("挂载后！");
  });
  
  // onBeforeUpdate(()=>{
  //   console.log("更新前！")
  //   })
  //   onUpdated(()=>{
  //     console.log("更新后！")
  //     })
  //     onBeforeUnmount(()=>{
  //       console.log("卸载前！")
  //       })
  //       onUnmounted(()=>{
  //         console.log("卸载后！")
  //         })
  
  // export default {
  //   name: "transition-page",
  //   setup() {
  //     const count = ref(0);
  //     const name = "啊啊啊";
  //     console.log(count);
  //     const fn = () => {
  //       count.value++;
  //       name = "aaa";
  //     };
  //     return {
  //       count,
  //       name,
  //       fn,
  //     };
  //   },
  // };
  </script> -->
  
  <style scoped>
  /**进入动画 */
  .slide-fade-leave-from {
    transform: translateX(100px);
    opacity: 0;
  }
  .slide-fade-leave-active {
    transition: all 0.5s ease-in-out;
  }
  .slide-fade-leave-to {
    transform: translateX(0);
    opacity: 1;
  }
  
  /**离开动画*/
  .slide-fade-leave-from {
    transform: translateX(0);
    opacity: 1;
  }
  .slide-fade-leave-active {
    transition: all 0.5s ease-in-out;
  }
  .slide-fade-leave-to {
    transform: translateX(100px);
    opacity: 0;
  }
  </style>
  